<template>
  <a-modal
    :maskClosable="maskClosable"
    title="查看评分"
    :width="1060"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <h3>
      <a-icon
        type="database"
        style="margin-right: 10px"
      />{{ model.name }}</h3>
      <a-card>
        <a-row>
          <a-col :span="15">
            <radar
              chartId="radar"
              :title="model.name"
              :data="radarData"
            />
          </a-col>
          <a-col :span="9">
            <a-form
              :labelCol="{ span: 13 }"
              :wrapperCol="{ span: 11 }"
              v-bind="formItemLayout"
            >
              <a-form-item
                v-for="d in scores"
                :key="d.factorId"
                :label="d.factorName + '评分'"
              >
                <span class="ant-form-text">
                  <a-progress
                    status="active"
                    :percent="d.score"
                    :format="percent => `${percent}`"
                    :stroke-color="d.score < 60 ? '#b93b04' : d.score < 80 ? '#ffb400' : '#089b04'"
                  />
                </span>
              </a-form-item>
              <a-form-item label="最优设备评分">
                <span class="ant-form-text">
                  <a-progress
                    status="active"
                    :percent="totalScore"
                    :format="percent => `${percent}`"
                    :stroke-color="totalScore < 60 ? '#b93b04' : totalScore < 80 ? '#ffb400' : '#089b04'"
                  />
                </span>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
  </a-modal>
</template>
<script>
  import {
    GwListMixin
  } from '@/mixins/GwListMixin'
  import {
    gPostAction
  } from '@/api/manage'
  import Radar from './Radar'

  export default {
    name: 'DetailModal',
    mixins: [GwListMixin],
    components: {
      Radar,
    },
    data() {
      return {
        visible: false,
        confirmLoading: false,
        model: {},
        formItemLayout: {
          labelCol: {
            span: 8
          },
          wrapperCol: {
            span: 8
          },
        },
        scores: [],
        totalScore: 0,
        radarData: [],
        maskClosable: false,
      }
    },
    mounted() {},
    methods: {
      showModal(record) {
        this.model = Object.assign({}, record)
        this.visible = true
        this.loadData()
      },
      loadData() {
        this.scores = []
        this.radarData = []
        this.gQueryParam.resourceId = this.model.id
        this.gQueryParam.modelType = 'DATACENTER_DEVICE'
        this.gQueryParam.title = "精确管控与供电制冷联动-统一管理联动平台-最优设备代价模型-最优设备代价模型列表"
        gPostAction('/model/detailModelScore', this.gQueryParam).then((res) => {
          if (res.scores) {
            this.scores = res.scores
            res.scores.forEach((d, i) => {
              this.radarData.push({
                item: res.factors[i].layer + "：" + d.factorName + "评分",
                score: d.score,
                diff: res.factors[i].diff,
              })
            })
          }
          this.totalScore = res.totalScore
        })
      },
      handleOk(e) {
        this.ModalText = 'The modal will be closed after two seconds'
        this.confirmLoading = true
        setTimeout(() => {
          this.visible = false
          this.confirmLoading = false
        }, 2000)
      },
      handleCancel(e) {

        this.visible = false
      },
    },
  }
</script>

<style
  lang="less"
  scoped
>
  .ant-form-text {
    width: 100%;
    padding-right: 0;
  }
</style>